<template>
	<view>
		<view class="contentCla">
			<view class="boxCla">
				<view class="titleCla">
					<view class="titleNameCla">
						{{guanjianciData.titleName}}
					</view>
				</view>
				<view class="textCla">
					{{guanjianciData.Content}}
				</view>
				<view class="recommendedCla">
					推荐假期(单选)
				</view>
				<view class="recommendedBoxCla">
					<view class="recommendedItemCla" :class="{'recommendedItemCla1':tuijianIndex == index}"
						v-for="(item,index) in tuijianList" :key="index" @click="tuijianshijianClick(index,item)">
						<text>{{item.FullName}}</text>
					</view>
				</view>
				<view class="customCla">
					自定义假期
				</view>
				<view class="customBoxCla">
					<view class="itemCla" v-for="(item,index) in zidingyiList" :key="index">
						<view class="customBoxItemCla" @click="zidingyishijianCla" :class="{'customBoxItemCla1':item.checked == false}">
							{{item.FullName}}
						</view>
						<u-icon class="iconCla" name="close-circle-fill" color="#000000 " size="19"
							@click="iconClick"></u-icon>
					</view>
					<view class="customkeywordCla" @click="customkeywordClick" v-if="zidingyiList.length == 0">
						自定义
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="自定义假期" showCancelButton @confirm="confirmClick" @cancel="cancelClick">
			<u--input placeholder="如:月休4天限30字" border='none' maxlength="30"
				v-model="value"></u--input>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tuijianList: [],
				zidingyiList: [],
				show: false,
				value: '',
				tuijianIndex: 0,
				FullName:'',
			}
		},
		props: {
			guanjianciData: {
				type: Object
			},
			guanjianciShow: {
				type: Boolean,
				dafault: false
			},
		},
		watch:{
			guanjianciShow(newVal){
				if(newVal){
					if(this.tuijianIndex !== null || this.zidingyiList !== []){
						this.chuanshuMet()
					}else{
						this.$util.toast("请选择工作假期！");
					}
				}
			}
		},
		created() {
			this.tuijianMet();
		},
		methods: {
			
			//工作假期回显
			echoWorkingHoliday(val){
				this.tuijianList.forEach((item,index) => {
					if(val.Holiday == item.FullName){
						this.tuijianIndex = index;
					}
				})
				if(this.tuijianIndex == null && val.Holiday !== null){
					this.zidingyiList.push({
						FullName: val.Holiday,
						checked: true,
					})
				}
			},
			
			chuanshuMet(){
				let sunArr = '';
				if(this.tuijianIndex == null){
					sunArr = this.zidingyiList[0].FullName;
				}else{
					sunArr = this.FullName
				}
				this.$emit('toguanjianciData',sunArr)
			},
			
			tuijianMet() {
				this.$http.dic.DataSelector(391177702154373).then((res) => {
					this.tuijianList = res.Result;
					this.echoWorkingHoliday(this.guanjianciData)
					if(this.tuijianIndex == 0){
						this.FullName = this.tuijianList[0].FullName
					}
				})
			},
			customkeywordClick() {
				this.show = !this.show
			},
			//确认
			confirmClick() {
				let obj = {
					FullName: this.value,
					checked: true,
				}
				this.zidingyiList.push(obj)
				this.tuijianIndex = null;
				this.value = '';
				this.show = false;
			},
			//取消
			cancelClick() {
				this.show = false;
			},
			// 推荐时间点击事件
			tuijianshijianClick(index,item) {
				if(this.zidingyiList.length !== 0){
					if(this.zidingyiList[0].checked){
						this.tuijianIndex = null;
						this.$util.toast("推荐假期和自定义假期只能选一种！");
					}else{
						this.tuijianIndex = index;
						this.FullName = item.FullName;
					}
				}else{
					if(this.tuijianIndex !== null){
						if(this.tuijianIndex == index){
							this.tuijianIndex = null;
						}else{
							this.tuijianIndex = index;
							this.FullName = item.FullName;
						}
					}else{
						this.tuijianIndex = index;
						this.FullName = item.FullName;
					}
				}
				
			},
			// 自定义时间内容点击事件
			zidingyishijianCla(){
				if(this.tuijianIndex !== null){
					this.zidingyiList[0].checked == false;
					this.$util.toast("推荐假期和自定义假期只能选一种！");
				}else{
					this.zidingyiList[0].checked = !this.zidingyiList[0].checked
				}
			},
			// 删除图标点击事件
			iconClick(){
				this.zidingyiList = [];
				this.tuijianIndex = 0;
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-input {
		min-width: 590rpx;
	}

	.contentCla {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.boxCla {
			padding: 0 40rpx;

			.titleCla {
				width: 100%;
				padding-top: 60rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #000000;
				display: flex;
				justify-content: space-between;

				.titleNameCla {
					width: 85%;
				}

				.numCla {}
			}

			.textCla {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}

			.recommendedCla {
				margin: 83rpx 0 20rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #000000;
			}

			.recommendedBoxCla {
				display: flex;
				flex-wrap: wrap;

				.recommendedItemCla {
					width: 30%;
					height: 76rpx;
					background: #F7F8FA;
					border-radius: 6rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;

					text {
						width: 90%;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.recommendedItemCla1 {
					width: 30%;
					height: 76rpx;
					background: #F1F8FF;
					border-radius: 6rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #3476FE;
					border: 2rpx solid #3476FE;

					text {
						width: 90%;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.recommendedItemCla:not(:nth-child(3n)) {
					margin-right: calc(14%/3);
				}
			}

			.customCla {
				margin: 40rpx 0 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.customBoxCla {
				display: flex;
				flex-wrap: wrap;

				.itemCla {
					min-width: 30%;
					position: relative;

					.customBoxItemCla {
						padding: 10rpx 20rpx;
						height: 76rpx;
						background: #F1F8FF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						opacity: 1;
						border: 2rpx solid #3476FE;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #3476FE;
						margin-bottom: 20rpx;
					}

					.customBoxItemCla1 {
						height: 76rpx;
						background: #F7F8FA;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						opacity: 1;
						border: 2rpx solid #F7F8FA;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-bottom: 20rpx;
					}

					.iconCla {
						position: absolute;
						left: 100%;
						bottom: 100%;
						transform: translate(-10px, 10px);
					}
				}

				.customkeywordCla {
					width: 30%;
					height: 76rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					opacity: 1;
					border: 2rpx solid #3476FE;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #3476FE;
					font-size: 26rpx;
				}

			}


		}

	}
</style>